<template>
    <div>
        <!--工具栏-->
        <el-form :inline="true" size="mini" class="toolbar">
            <el-form-item label="分类" >
                <el-select v-model="type" style="width:150px" clearable>
                    <el-option v-for="(item,index) in types" :key="index" :label="item.categoryName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch" >查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="gotoAdd" plain >新增</el-button>
            </el-form-item>
        </el-form>
        <!--表格区-->
        <el-table :data="tableData" border stripe style="width: 100%;" size="small"
            v-loading="loading" 
            element-loading-text="请稍后...">
            <template slot="empty">
                还没有数据呢~ (⊙︿⊙)
            </template>
            <el-table-column type="index" :index="common.getRowIndex" label="#" align="center"></el-table-column>
            <el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
            <el-table-column prop="createDate" label="创建时间" align="center"></el-table-column>
            <el-table-column align="center" label="操作" width="130">
                <template slot-scope="scope" >
                    <el-button size="mini" type="primary"  plain 
                    @click="handleDetails(scope.row.id)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- Form -->
        <el-dialog :title="dataForm.title" :visible.sync="dialogFormVisible">
            <el-form :model="dataForm" :rules="rules" ref="dataForm" v-loading="dialogFormLoading">
                <el-form-item label="分类" prop="appName">
                    <el-select v-model="dataForm.appName" >
                        <el-option  v-for="(item,index) in appNames" :key="index" :label="item.text" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称" prop="levelNo">
                    <el-input v-model.number="dataForm.levelNo" placeholder="名称"  style="width:30%" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('dataForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  export default {
    data() {
        return {
            types: [],
            tableData: [],
            limit: 10,
            total: 0,
            currentPage: 1,
            dialogFormVisible: false,
            dialogFormLoading: false,
            loading: false,
            dataForm:{
                title: '新增项目',
                id: '',
                appName:'',
                levelNo:'',
                name:'',
            },
            type: '',
            rules: {
                appName: [
                    { required: true, message: '请选择', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ]
            }
        }
    },
    created(){
        this.initTypes();
        this.getListData();
    },
    methods:{
        // 创建 / 修改
        submitForm(dataForm) {
            this.$refs[dataForm].validate((valid) => {
                if (valid) {
                    this.$message('功能待实现');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        getListData(){
            this.loading = true
            this.getRequest('/project-info/list', 
                {
                    page: this.currentPage,
                    limit: this.limit,
                    categoryId: this.type
                }
            ).then(resp => {
                if (resp.code == 0) {
                    this.tableData = resp.data;
                    this.total = resp.total;
                }
                this.loading = false
            })
        },
        onSearch(){
            this.getListData();
        },
        gotoAdd(){
            this.dataForm.title = '新增项目'
            this.dataForm.id = ''
            this.dataForm.levelNo = ''
            this.dataForm.name = ''
            this.dialogFormVisible = true
        },
        // 类型
        initTypes() {
            this.getRequest('/project-category/list', 
                {parentId: 0}).then(resp => {
                if (resp.code == 0) {
                    this.types = resp.data;
                }
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getListData();
        },
        handleDetails(id){
            this.$router.push("/project-details/" + id);
        }
    }
  };
</script>

<style scoped>
    .toolbar{
        height: 40px;
    }
</style>